<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cert Watcher Lite</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, viewport-fit=cover">
  <style>
      body {
          margin: 0;
          padding: 0;
      }

      .blocks {
          border-radius: 8px;
          border: 1px solid rgb(226, 232, 240);
      }

      .block {
          display: flex;
          min-width: 0;
          border-bottom: 1px solid rgb(226, 232, 240);
          padding: 12px;
      }

      .block:last-child {
          border-bottom: none;
      }

      .info {
          flex: 1;
          min-width: 0;
      }

      .host {
          font-size: 16px;
          color: rgb(9, 9, 11)
      }

      .remark, .expire {
          font-size: 12px;
          color: rgb(100, 116, 139)
      }

      .days {
          flex: 0 0 50px;
          font-size: 56px;
          line-height: 56px;
          font-weight: bold;
          text-align: right;
      }

      .green {
          color: rgb(103, 171, 149);
      }

      .yellow {
          color: rgb(230, 202, 97)
      }

      .red {
          color: rgb(202, 48, 56) !important;
      }
  </style>
  <script>
    function blocks (block) {
      return `<div class="blocks">${block.join('')}</div>`
    }

    function block (cert) {
      return `
        <div class="block">
          <div class="info">
            <div class="host">${cert.name}</div>
            <div class="expire">${cert.success ? `证书到期时间：${cert.validTo.substring(0, 10)}` : '检测失败'}</div>
            <div class="remark" title="${cert.remark}">${cert.remark}</div>
          </div>
          <div class="days ${cert.daysRemaining > 14 ? 'green' : cert.daysRemaining > 0
        ? 'yellow'
        : 'red'} ${(!cert.valid && !cert.onlyDaysMatter) ? 'red' : ''}">${cert.success ? cert.daysRemaining : '?'}</div>
        </div>
      `
    }

    fetch('/api/status.json').then(async (res) => {
      const data = await res.json()
      document.getElementById('app').innerHTML = blocks(data.map(block))
    })
  </script>
</head>
<body>
<div id="app"></div>
</body>
</html>
